<template>
    <div class="list">
            <ul>
                <li>操作</li>
                <li>音乐标题</li>
                <li>歌手</li>
                <li>专辑</li>
                <li>时长</li>
            </ul>
            <ul v-for="(item,index) in selectList" :key="index" class="LTiaoZhuan" @click="sendParams(item.musicId)">
                <li>{{index+1}}</li>
                <li>{{item.musicName}}</li>
                <li>{{item.singerName}}</li>
                <li>专辑</li>
                <li>时长</li>
            </ul>
        <!--<div>{{this.$store.state.countList}}</div>-->
    </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        name: "ContentList",
        data(){
            return{
            }
        },
        computed : {
            ...mapState({
                selectList : state => state.countList
            })
        },
        methods:{

        //     getSelectList(){
        //         this.$http({
        //             url:this.$http.adornUrl("/music/selectTwenty"),
        //             method:'post',
        //         }).then(({data}) => {
        //             console.log(data)
        //             this.selectList = data.musicList
        //         })
        //
        //     },
            //跳转到音乐播放页
            sendParams(id) {
                this.$router.push('/singerplayer/' + id);
            },
        },




    }

</script>

<style scoped>


    .list{
        width: 90%;
        height: 650px;
        background-color:black;
        float: right;

    }
    .list ul{
        width: 90%;
        /*指针样式*/
        cursor: pointer;
        color: white;
    }
    .list ul li{
        list-style-type: none;
        float: left;
        width: 19%;
        height: 40px;
        text-overflow:ellipsis;
        /*显示为省略号 可以用clip,不显示省略号，将溢出部分裁掉*/
        white-space:nowrap;
        /*文字不换行*/
        overflow:hidden;
        line-height: 40px;
        /*color: white;*/
    }

    .list .LTiaoZhuan:hover{
        color: #9e9e9e !important;
    }

</style>